<template>
  <div class="activity-login-wrapper">
    <div class="wrapper-logo">
      <img class="logo" :src="logoSrc" />
    </div>
    <van-popup v-model:show="showPopup" round :close-on-click-overlay="false" :style="{ width: '400px' }">
      <div class="wrapper-login">
        <div class="title">管理员登录</div>
        <el-form ref="loginFormRef" label-position="right" :model="loginForm" :rules="loginRules">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" maxlength="15"></el-input>
          </el-form-item>
          <el-form-item label="密　码" prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              show-password
              placeholder="请输入密码"
              maxlength="15"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item> -->
        </el-form>
        <div class="btn">
          <van-button round block type="primary" @click="handleLogin"> 登录 </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style lang="less" scoped>
// prettier-ignore
.activity-login-wrapper{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url('@/assets/images/scb.jpg') no-repeat center; background-size: cover;
 .wrapper-mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.2); }
 .wrapper-logo{ position: absolute; top: 0; left: 0; z-index: 9999;
   .logo{ 
        margin-left: 50px;
        margin-top: 15px;
        display: block; 
        width: 200px; 
        height: 200px; /* 新增，设置高度与宽度一致 */
        border-radius: 50%; /* 将图片设置为圆形 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
        object-fit: cover; /* 确保图片填充圆形 */
    }
  }
 .wrapper-login{ padding: 30px;
   .title{ font-size: 16px; text-align: center; font-weight: 500; margin-bottom: 10px; }
   .text{ font-size: 14px; text-align: center; color: #999; margin-bottom: 20px; }
   .input{ width: 100%; margin: 20px 0; background: rgba(0,0,0,0.1); border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); overflow: hidden; }
   .btn{ margin: 40px 0 0 }
  }
}
</style>

<script lang="ts" setup>
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/useStore'
import { ElMessage } from 'element-plus'
import logoImg from '@/assets/images/scb.jpg'

const logoSrc = ref(logoImg)
const router = useRouter()
const userStore = useUserStore()

const showPopup = ref(false)

// 登录表单
const loginFormRef = ref<HTMLFormElement | null>(null)
const loginForm = ref({ username: '', password: '' })
const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

// 登录
const handleLogin = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.validate(async (valid: any) => {
    if (!valid) return
    await userStore.adminLogin(loginForm.value)
    ElMessage.success('登录成功')
    router.replace({ name: 'AdminHome' })
  })
}

onBeforeMount(async () => {
  const authToken = userStore.getAuthToken()
  if (authToken) {
    router.replace({ name: 'AdminHome' })
  } else {
      setTimeout(() => {
      showPopup.value = true
    }, 200)
  }
})
</script>
